<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./src/assets/icons/jd-icon.ico">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3893475_ljsjvb722fk.css">
    <link rel="stylesheet" href="./src/styles/root.css">
    <link rel="stylesheet" href="./src/styles/navigation-bar.css">
    <link rel="stylesheet" href="./src/styles/header-area.css">
    <link rel="stylesheet" href="./src/styles/banner-area.css">
    <link rel="stylesheet" href="./src/styles/footer-area.css">
    <title>FAKE-京东</title>
</head>

<body>
    <main id="main-container">
        <!-- 顶部导航栏 -->
        <nav id="top-navigation-bar">
            <div id="navigation-content">
                <div class="nav-left-location">
                    <i class="icon-dingwei iconfont text-red"></i>
                    <span class="text-gray-pale">北京</span>
                </div>
                <div class="nav-right-funtion">
                    <label for="nav-login-button" class="text-gray-pale">你好，请登录</label>
                    <button id="nav-login-button" type="button" class="text-red">免费注册</button>
                    <ul class="text-gray-pale">
                        <li>
                            <span>我的订单</span>
                        </li>
                        <li>
                            <span>
                                <span>
                                    我的京东
                                </span>
                                <i class="icon-xiala iconfont"></i>
                            </span>
                            <!-- 隐藏 -->
                            <div class="absolute-area">
                                <div class="absolute-content">
                                    <div class="grid-item-1">
                                        <span>待处理订单</span>
                                        <span>返修退换货</span>
                                        <span>我的问答</span>
                                        <span>我的关注</span>
                                        <span>降价商品</span>
                                    </div>
                                    <div class="grid-item-2">
                                        <span>我的京豆</span>
                                        <span>我的理财</span>
                                        <span>我的优惠券</span>
                                        <span>我的白条</span>
                                    </div>
                                    <div class="grid-item-3">
                                        <span>帮助中心</span>
                                        <span>售后服务</span>
                                        <span>在线客服</span>
                                        <span>意见建议</span>
                                        <span>电话客服</span>
                                        <span>客服邮箱</span>
                                        <span>金融咨询</span>
                                        <span>全球售客服</span>
                                        <span>企业客服</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <span>
                                <span class="text-red">企业采购</span>
                                <i class="icon-xiala iconfont"></i>
                            </span>
                        </li>
                        <li>
                            <span>
                                <span>商家服务</span>
                                <i class="icon-xiala iconfont"></i>
                            </span>
                        </li>
                        <li>
                            <span>
                                <span>网站导航</span>
                                <i class="icon-xiala iconfont"></i>
                            </span>
                        </li>
                        <li>
                            <span>手机京东</span>
                        </li>
                        <li>
                            <span>网站无障碍</span>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- 顶部功能区域(搜索等等) -->
        <header id="top-header-area">
            <div id="header-content">
                <div class="jd-icon">
                </div>
                <div class="search-area">
                    <div class="nav-cate-up">
                        <div class="search-box">
                            <div class="search-bar">
                                <input type="text" placeholder="lg显示器" class="text-gray-light">
                                <span>
                                    <i class="icon-xiangji iconfont text-gray-light"></i>
                                </span>
                                <button type="button" title="搜索">
                                    <i class="icon-31sousuo iconfont"></i>
                                </button>
                            </div>
                            <div class="shopping-cart">
                                <i class="icon-31gouwuche iconfont"></i>
                                <span class="number">0</span>
                                <span class="title">我的购物车</span>
                            </div>
                        </div>
                        <div class="trending-words">
                            <ul class="text-gray-pale">
                                <li>康铂大特惠</li>
                                <li>全球买手</li>
                                <li>健康好礼</li>
                                <li>爱普生</li>
                                <li>数码配件</li>
                                <li>京东京造</li>
                                <li>时令果蔬</li>
                                <li>冰洗换新</li>
                                <li>天天平价</li>
                            </ul>
                        </div>
                    </div>
                    <div class="nav-categories">
                        <ul class="text-gray">
                            <li>京东超市</li>
                            <li>优惠券</li>
                            <li>秒杀</li>
                            <li>京东生鲜</li>
                            <li>京东家电</li>
                            <li>PLUS会员</li>
                            <li>拍卖</li>
                            <li>进口好物</li>
                            <li>品牌闪购</li>
                            <li>京东五金城</li>
                        </ul>
                    </div>
                </div>
                <div class="blank-area"></div>
            </div>
        </header>

        <!-- 顶部导航/横幅/登录区域 -->
        <section id="top-banner-area">
            <div id="banner-content">
                <div class="nav-list-area">
                    <ul class="text-gray">
                        <li>
                            <span>家用电器</span>
                            <!-- 隐藏元素 -->
                            <div class="appliance-hidden-info">
                                <div class="left-column">
                                    <div class="title">
                                        <button type="button">
                                            <span>家电馆</span>
                                            <i class="icon-youjiantou iconfont"></i>
                                        </button>
                                        <button type="button">
                                            <span>开店设备一站购</span>
                                            <i class="icon-youjiantou iconfont"></i>
                                        </button>
                                    </div>
                                    <div class="category-lists">
                                        <dl>
                                            <dt>
                                                <span>电视</span>
                                                <i class="icon-youjiantou iconfont"></i>
                                            </dt>
                                            <dd>
                                                <span>全面屏电视</span>
                                                <span>教育电视</span>
                                                <span>OLED电视</span>
                                                <span>智慧屏</span>
                                                <span>4K超清电视</span>
                                                <span>55英寸</span>
                                                <span>65英寸</span>
                                                <span>电视配件</span>
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>
                                                <span>空调</span>
                                                <i class="icon-youjiantou iconfont"></i>
                                            </dt>
                                            <dd>
                                                <span>新风空调</span>
                                                <span>以旧换新</span>
                                                <span>空调挂机</span>
                                                <span>空调柜机</span>
                                                <span>空调套装</span>
                                                <span>新一级能效</span>
                                                <span>挂机1.5匹</span>
                                                <span>柜机3匹</span>
                                                <span>变频空调</span>
                                                <span>中央空调</span>
                                                <span>移动空调</span>
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>
                                                <span>洗衣机</span>
                                                <i class="icon-youjiantou iconfont"></i>
                                            </dt>
                                            <dd>
                                                <span>滚筒洗衣机</span>
                                                <span>洗烘一体机</span>
                                                <span>波轮洗衣机</span>
                                                <span>洗烘套装</span>
                                                <span>迷你洗衣机</span>
                                                <span>洗衣机配件</span>
                                                <span>烘干机</span>
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>
                                                <span>冰箱</span>
                                                <i class="icon-youjiantou iconfont"></i>
                                            </dt>
                                            <dd>
                                                <span>多门</span>
                                                <span>对开门</span>
                                                <span>三门</span>
                                                <span>双门</span>
                                                <span>冰洗套装</span>
                                                <span>冷柜/冰吧</span>
                                                <span>酒柜</span>
                                                <span>冰箱配件</span>
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>
                                                <span>厨卫大电</span>
                                                <i class="icon-youjiantou iconfont"></i>
                                            </dt>
                                            <dd>
                                                <span>油烟机</span>
                                                <span>灶具</span>
                                                <span>烟灶套装</span>
                                                <span>集成灶</span>
                                                <span>集成水槽</span>
                                                <span>消毒柜</span>
                                                <span>洗碗机</span>
                                                <span>电热水器</span>
                                                <span>燃气热水器</span>
                                                <span>壁挂炉</span>
                                                <span>空气能热水器</span>
                                                <span>嵌入式厨电</span>
                                                <span>太阳能热水器</span>
                                                <span>烟机灶具配件</span>
                                                <span>电热水龙头</span>
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>
                                                <span>厨房小电</span>
                                                <i class="icon-youjiantou iconfont"></i>
                                            </dt>
                                            <dd>
                                                <span>破壁机</span>
                                                <span>咖啡机</span>
                                                <span>榨汁机</span>
                                                <span>电炖锅</span>
                                                <span>果蔬净化清洗机</span>
                                                <span>三明治机/早餐机</span>
                                                <span>电烤箱</span>
                                                <span>厨师机/和面机</span>
                                                <span>料理机</span>
                                                <span>电饼铛</span>
                                                <span>电水壶/热水瓶</span>
                                                <span>面包机</span>
                                                <span>电火锅</span>
                                                <span>空气炸锅</span>
                                                <span>养生壶</span>
                                                <span>电磁炉</span>
                                                <span>电饭煲</span>
                                                <span>电压力锅</span>
                                                <span>微波炉</span>
                                                <span>面条机</span>
                                                <span>电陶炉</span>
                                                <span>电烧烤炉</span>
                                                <span>煮蛋器</span>
                                                <span>电热饭盒</span>
                                                <span>豆浆机</span>
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>
                                                <span>环境电器</span>
                                                <i class="icon-youjiantou iconfont"></i>
                                            </dt>
                                            <dd>
                                                <span>取暖器</span>
                                                <span>空气净化器</span>
                                                <span>加湿器</span>
                                                <span>净水器</span>
                                                <span>饮水机</span>
                                                <span>茶吧机</span>
                                                <span>除湿机</span>
                                                <span>电话机</span>
                                                <span>电风扇</span>
                                                <span>生活电器配件</span>
                                                <span>冷风扇</span>
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>
                                                <span>个护健康</span>
                                                <i class="icon-youjiantou iconfont"></i>
                                            </dt>
                                            <dd>
                                                <span>剃须刀</span>
                                                <span>电动牙刷</span>
                                                <span>冲牙器</span>
                                                <span>电吹风</span>
                                                <span>卷/直发器</span>
                                                <span>理发器</span>
                                                <span>美容仪</span>
                                                <span>剃/脱毛器</span>
                                                <span>洁面仪</span>
                                                <span>按摩器</span>
                                                <span>按摩椅</span>
                                                <span>足浴盆</span>
                                                <span>挂烫机/熨斗</span>
                                                <span>电动牙刷头</span>
                                                <span>干衣机</span>
                                                <span>毛球修剪器</span>
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>
                                                <span>清洁电器</span>
                                                <i class="icon-youjiantou iconfont"></i>
                                            </dt>
                                            <dd>
                                                <span>吸尘器</span>
                                                <span>扫地机器人</span>
                                                <span>擦窗机器人</span>
                                                <span>蒸汽/电动拖把</span>
                                                <span>除螨仪</span>
                                                <span>洗地机</span>
                                            </dd>
                                        </dl>
                                        <dl>
                                            <dt>
                                                <span>视听影音</span>
                                                <i class="icon-youjiantou iconfont"></i>
                                            </dt>
                                            <dd>
                                                <span>家庭影院</span>
                                                <span>KTV音响</span>
                                                <span>迷你音响</span>
                                                <span>DVD</span>
                                                <span>功放</span>
                                                <span>回音壁</span>
                                                <span>麦克风</span>
                                            </dd>
                                        </dl>
                                    </div>
                                </div>
                                <div class="right-column">
                                    <div class="first">
                                        <img src="./src/assets/images/siemens-brand.png" alt="">
                                        <img src="./src/assets/images/siemens-brand.png" alt="">
                                        <img src="./src/assets/images/siemens-brand.png" alt="">
                                        <img src="./src/assets/images/siemens-brand.png" alt="">
                                        <img src="./src/assets/images/siemens-brand.png" alt="">
                                        <img src="./src/assets/images/siemens-brand.png" alt="">
                                        <img src="./src/assets/images/siemens-brand.png" alt="">
                                        <img src="./src/assets/images/siemens-brand.png" alt="">
                                    </div>
                                    <div class="second">
                                        <img src="./src/assets/images/jd-jiadian.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <span>手机</span>
                            <i>/</i>
                            <span>运营商</span>
                            <i>/</i>
                            <span>数码</span>
                        </li>
                        <li>
                            <span>电脑</span>
                            <i>/</i>
                            <span>办公</span>
                        </li>
                        <li>
                            <span>家居</span>
                            <i>/</i>
                            <span>家具</span>
                            <i>/</i>
                            <span>家装</span>
                            <i>/</i>
                            <span>厨具</span>
                        </li>
                        <li>
                            <span>男装</span>
                            <i>/</i>
                            <span>女装</span>
                            <i>/</i>
                            <span>童装</span>
                            <i>/</i>
                            <span>内衣</span>
                        </li>
                        <li>
                            <span>美妆</span>
                            <i>/</i>
                            <span>个护清洁</span>
                            <i>/</i>
                            <span>宠物</span>
                        </li>
                        <li>
                            <span>女鞋</span>
                            <i>/</i>
                            <span>箱包</span>
                            <i>/</i>
                            <span>钟表</span>
                            <i>/</i>
                            <span>珠宝</span>
                        </li>
                        <li>
                            <span>男鞋</span>
                            <i>/</i>
                            <span>运动</span>
                            <i>/</i>
                            <span>户外</span>
                        </li>
                        <li>
                            <span>房产</span>
                            <i>/</i>
                            <span>汽车</span>
                            <i>/</i>
                            <span>汽车用品</span>
                        </li>
                        <li>
                            <span>母婴</span>
                            <i>/</i>
                            <span>玩具乐器</span>
                        </li>
                        <li>
                            <span>食品</span>
                            <i>/</i>
                            <span>酒类</span>
                            <i>/</i>
                            <span>生鲜</span>
                            <i>/</i>
                            <span>特产</span>
                        </li>
                        <li>
                            <span>艺术</span>
                            <i>/</i>
                            <span>礼品鲜花</span>
                            <i>/</i>
                            <span>农资绿植</span>
                        </li>
                        <li>
                            <span>医药保健</span>
                            <i>/</i>
                            <span>计生情趣</span>
                        </li>
                        <li>
                            <span>图书</span>
                            <i>/</i>
                            <span>文娱</span>
                            <i>/</i>
                            <span>教育</span>
                            <i>/</i>
                            <span>电子书</span>
                        </li>
                        <li>
                            <span>机票</span>
                            <i>/</i>
                            <span>酒店</span>
                            <i>/</i>
                            <span>旅游</span>
                            <i>/</i>
                            <span>生活</span>
                        </li>
                        <li>
                            <span>众筹</span>
                            <i>/</i>
                            <span>白条</span>
                            <i>/</i>
                            <span>保险</span>
                            <i>/</i>
                            <span>企业金融</span>
                        </li>
                        <li>
                            <span>安装</span>
                            <i>/</i>
                            <span>维修</span>
                            <i>/</i>
                            <span>清洗</span>
                            <i>/</i>
                            <span>二手</span>
                        </li>
                        <li>
                            <span>工业品</span>
                        </li>
                    </ul>
                </div>
                <div class="banner-area">
                    <div>
                        <div class="banner-1"></div>
                        <div class="banner-2"></div>
                        <div class="banner-3"></div>
                    </div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="login-area">
                    <div class="log-in">
                        <div>
                            <img src="./src/assets/images/login-default-avatar.png" alt="">
                            <div>
                                <span class="title text-gray-light">Hi~欢迎逛京东！</span>
                                <span class="text-gray">
                                    <span>登录</span>
                                    <i>|</i>
                                    <span>注册</span>
                                </span>
                            </div>
                        </div>
                        <div class="button-group">
                            <button type="button">新人福利</button>
                            <button type="button">PLUS会员</button>
                        </div>
                    </div>
                    <div class="news">
                        <div class="title">
                            <h4 class="text-gray">京东快报</h4>
                            <span class="text-gray-pale">
                                <span>更多</span>
                                <i class="icon-youjiantou iconfont"></i>
                            </span>
                        </div>
                        <ul>
                            <li>
                                <span>热议</span>
                                <div>reebok 二代BB 4000 II</div>
                            </li>
                            <li>
                                <span>推荐</span>
                                <div>儿童自律打卡器，可以帮助孩子拒绝拖延症</div>
                            </li>
                            <li>
                                <span>热议</span>
                                <div>答应我，秋冬换季“卫衣”就是要这样穿</div>
                            </li>
                            <li>
                                <span>推荐</span>
                                <div>装上COLMO电热水器EV6032，尽享酣畅沐浴体验</div>
                            </li>
                        </ul>
                    </div>
                    <div class="nav-grid">
                        <div>
                            <i class="iconfont icon-lipinka"></i>
                            <span>礼品卡</span>
                        </div>
                        <div>
                            <i class="iconfont icon-qiye"></i>
                            <span>企业购</span>
                        </div>
                        <div>
                            <i class="iconfont icon-shouji"></i>
                            <span>话费</span>
                        </div>
                        <div>
                            <i class="iconfont icon-wendang"></i>
                            <span>白条</span>
                        </div>
                        <div>
                            <i class="iconfont icon-youxi"></i>
                            <span>游戏</span>
                        </div>
                        <div>
                            <i class="iconfont icon-feijiflight"></i>
                            <span>机票</span>
                        </div>
                        <div>
                            <i class="iconfont icon-jiayou"></i>
                            <span>加油卡</span>
                        </div>
                        <div>
                            <i class="iconfont icon-huoche"></i>
                            <span>火车票</span>
                        </div>
                        <div>
                            <i class="iconfont icon-gongju"></i>
                            <span>五金城</span>
                        </div>
                        <div>
                            <i class="iconfont icon-dianyingpiao"></i>
                            <span>电影票</span>
                        </div>
                        <div>
                            <i class="iconfont icon-hotel"></i>
                            <span>酒店</span>
                        </div>
                        <div>
                            <i class="iconfont icon-yunzhuji"></i>
                            <span>云主机</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="middle-blank-content"></section>

        <!-- 底部页脚区域 -->
        <footer id="bottom-footer-area">
            <div class="slogan">
                <div class="slogan-content">
                    <div>
                        <i></i>
                        <h2>品类齐全，轻松购物</h2>
                    </div>
                    <div>
                        <i></i>
                        <h2>多仓直发，极速配送</h2>
                    </div>
                    <div>
                        <i></i>
                        <h2>正品行货，精致服务</h2>
                    </div>
                    <div>
                        <i></i>
                        <h2>天天低价，畅选无忧</h2>
                    </div>
                </div>
            </div>
            <div id="footer-content">
                <div class="helps text-gray-light">
                    <div>
                        <span class="title">购物指南</span>
                        <ul>
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行</li>
                            <li>常见问题</li>
                            <li>大家电</li>
                            <li>联系客服</li>
                        </ul>
                    </div>
                    <div>
                        <span class="title">配送方式</span>
                        <ul>
                            <li>上门自提</li>
                            <li>211限时达</li>
                            <li>配送服务查询</li>
                            <li>配送费收取标准</li>
                        </ul>
                    </div>
                    <div>
                        <span class="title">支付方式</span>
                        <ul>
                            <li>货到付款</li>
                            <li>在线支付</li>
                            <li>分期付款</li>
                            <li>公司转账</li>
                        </ul>
                    </div>
                    <div>
                        <span class="title">售后服务</span>
                        <ul>
                            <li>售后政策</li>
                            <li>价格保护</li>
                            <li>退款说明</li>
                            <li>返修/退换货</li>
                            <li>取消订单</li>
                        </ul>
                    </div>
                    <div>
                        <span class="title">特色服务</span>
                        <ul>
                            <li>夺宝岛</li>
                            <li>DIY装机</li>
                            <li>延保服务</li>
                            <li>京东E卡</li>
                            <li>京东通信</li>
                            <li>京鱼座智能</li>
                        </ul>
                    </div>
                    <div>
                        <span class="title">京东自营覆盖区县</span>
                        <ul>
                            <li>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</li>
                        </ul>
                        <div>
                            <span>查看详情</span>
                            <i class="icon-youjiantou iconfont"></i>
                        </div>
                    </div>
                </div>
                <div class="copyright">
                    <div class="copyright-links text-gray-light">
                        <span>关于我们</span>
                        <i>|</i>
                        <span>联系我们</span>
                        <i>|</i>
                        <span>联系客服</span>
                        <i>|</i>
                        <span>合作招商</span>
                        <i>|</i>
                        <span>商家帮助</span>
                        <i>|</i>
                        <span>营销中心</span>
                        <i>|</i>
                        <span>手机京东</span>
                        <i>|</i>
                        <span>友情链接</span>
                        <i>|</i>
                        <span>销售联盟</span>
                        <i>|</i>
                        <span>京东社区</span>
                        <i>|</i>
                        <span>风险监测</span>
                        <i>|</i>
                        <span>隐私政策</span>
                        <i>|</i>
                        <span>京东公益</span>
                        <i>|</i>
                        <span>Media & IR</span>
                    </div>
                    <div class="copyright-info text-gray-pale">
                        <div>
                            <span>京公网安备 11000002000088号</span>
                            <i>|</i>
                            <span>京ICP备11041704号</span>
                            <i>|</i>
                            <span>ICP</span>
                            <i>|</i>
                            <span>互联网药品信息服务资格证编号(京)-经营性-2014-0008</span>
                            <i>|</i>
                            <span>新出发京零 字第大120007号</span>
                        </div>
                        <div>
                            <span>互联网出版许可证编号新出网证(京)字150号</span>
                            <i>|</i>
                            <span>出版物经营许可证</span>
                            <i>|</i>
                            <span>网络文化经营许可证京网文[2020]6112-1201号</span>
                            <i>|</i>
                            <span>违法和不良信息举报电话：4006561155</span>
                        </div>
                        <div>
                            <span>Copyright © 2004 - 2023  京东JD.com 版权所有</span>
                            <i>|</i>
                            <span>消费者维权热线：4006067733</span>
                            <i>|</i>
                            <span>经营证照</span>
                            <i>|</i>
                            <span>(京)网械平台备字(2018)第00003号</span>
                            <i>|</i>
                            <span>营业执照</span>
                            <i>|</i>
                            <span>增值电信业务经营许可证</span>
                        </div>
                        <div>
                            <span class="flag flag-1"></span>
                            <span>Сайт России</span>
                            <i>|</i>
                            <span class="flag flag-2"></span>
                            <span>Situs Indonesia</span>
                            <i>|</i>
                            <span class="flag flag-3"></span>
                            <span>Sitio de España</span>
                            <i>|</i>
                            <span class="flag flag-4"></span>
                            <span>เว็บไซต์ประเทศไทย</span>
                        </div>
                        <div>
                            <span>京东旗下网站： 京东钱包</span>
                            <i>|</i>
                            <span>京东云</span>
                            <i>|</i>
                            <span>网络内容从业人员违法违规行为举报电话：4006561155-3</span>
                        </div>
                    </div>
                    <div class="copyright-auth">
                        <a href=""></a>
                        <a href=""></a>
                        <a href=""></a>
                        <a href=""></a>
                        <a href=""></a>
                        <a href=""></a>
                        <a href=""></a>
                        <a href=""></a>
                    </div>
                </div>
            </div>
        </footer>
    </main>
</body>

</html>